<template>
    <div class = "log-book" v-echo-page page-name="logBook">
      <div class = "log-book-head">
        <div id = "log-title"> LOGBOOK </div>
        <div id = "transceiver"> &lt; {{transceiver}} &gt; </div>
        <div id = "range"> RANGE:{{range}} </div>
        <div id = "indicator">
          <img id = "indicatorImg" src = "../assets/indicator.png" >
          {{indicator.value.toUpperCase()}}
        </div>
      </div>

      <div class = "log-book-body">
        <div class = "page-num"> &lt; {{CurrentPage}}/{{AllPage}} &gt; </div>
        <div class = "log-table">
          <table cellspacing="0">
            <tr class = "log-book-table-title">
              <td class = "title1"> LOCAL </td>
              <td class = "title2"> AFT/m </td>
              <td class = "title3"> FORE/m </td>
              <td class = "title4" colspan="2"> Position </td>
            </tr>
          </table>
          <table class = "logData" cellspacing="0" v-for = "log in logData">
            <tr :class = "$index % 2 == 0 ? 'index1':'index2'"
                v-show = "($index >= (currentPage - 1) * 10) && ($index < currentPage * 10)">
              <td class = "local"> {{log.time | toLocalTime}} </td>
              <td class = "aft"> {{log.AFT}} </td>
              <td class = "fore"> &lt; {{transceiver}} &gt; {{log.depth}} </td>
              <td class = "lat"> {{log.Lat}} </td>
              <td class = "lon"> {{log.Lon}} </td>
            </tr>
          </table>
        </div>

        <div class = "echo-disp">
          <div class = "out-put">
            <img src = "../assets/arrow1.png" width = 15>
            <div class = "out-put-name">
              <div style = "color: #368BB8"> FORE </div>
              <div class = "frequence"> {{frequence}}kHz </div>
            </div>
            <img src = "../assets/arrow2.png" width = 15>
          </div>
          <div class = "log-book-draught">
            <span>DRAUGHT: {{draught}}m </span>
          </div>
          <div class = "log-book-depth">
            <span class = "depthVal"> {{depth}}</span>
            m
          </div>
        </div>
      </div>

      <div class = "log-book-tail">
        <div id = "tip">
          <div id = "log-book-description"> {{descrip}} </div>
        </div>
        <div class = "log-localtime">
          <span>LOCAL {{time}}</span>
        </div>
      </div>
    </div>
</template>

<script>
  import * as EchoKey from '../utils/echo-key'
  import EchoTool from '../utils/echo-tool.js'
  import EchoMenu from '../utils/echo-menu'
  let _display = EchoMenu.getMenuItems('menu/Display')
  let _sounder = EchoMenu.getMenuItems('menu/Sounder')

  function checkTime (i) {
    if (i < 10) {
      i = '0' + i
    }
    return i
  }

  let prepareLogData = function () {
    let _this = this
    let echoData = EchoTool.EchoData
    setInterval(function () {
      let _interval = _display[1].value
      if (_interval === '5s') {
        _interval = 5
      } else if (_interval === '1 min') {
        _interval = 60
      } else if (_interval === '2min') {
        _interval = 120
      }
      _this.logData = []
      for (let i = echoData.length - 1; i >= 0; i--) {
        let len = _this.logData.length
        // logData 储存超过720条就不储存
        if (len > 720) {
          break
        }
        if (len === 0) {
          _this.logData.push(echoData[i])
        } else {
          let tmp = _this.logData[len - 1]
          let sec = (tmp.time.getTime() - echoData[i].time.getTime()) / 1000.0
          sec = Math.floor(sec)
          if (sec === _interval) {
            _this.logData.push(echoData[i])
          }
        }
      }
    }, 5000)
  }

  export default {
    data () {
      return {
        echoTool: EchoTool,
        logData: [],
        allPage: 1,
        currentPage: 1,
        transceiver: 1,
        range: 'AUTO',
        indicator: _sounder[0],
        frequence: 50,
        time: ''
      }
    },
    ready () {
      prepareLogData.call(this)
    },
    created () {
      let _this = this
      setInterval(function () {
        let today = new Date()
        let h = today.getHours()
        let m = today.getMinutes()
        let s = today.getSeconds()
        m = checkTime(m)
        s = checkTime(s)
        _this.time = h + ':' + m
      }, 1000)
    },
    computed: {
      draught: function () {
        return '0.0'
      },
      depth: function () {
        let tmp = this.echoTool.depthRandom
        tmp = tmp - parseInt(tmp)
        if (tmp === 0) {
          return this.echoTool.depthRandom + '.0'
        }
        return this.echoTool.depthRandom
      },
      AllPage: function () {
        if (this.allPage < 10) {
          return '0' + this.allPage
        }
        return this.allPage
      },
      CurrentPage: function () {
        if (this.currentPage < 10) {
          return '0' + this.currentPage
        }
        return this.currentPage
      }
    },
    watch: {
      'logData.length': function () {
        let page = this.logData.length / 10 + 1
        page = Math.floor(page)
        this.allPage = page
      }
    },
    [EchoKey.DISP] (evt) {
      this.$echo.routeTo('disp')
    },
    [EchoKey.LEFT] (evt) {
      this.currentPage--
      if (this.currentPage <= 0) {
        this.currentPage = 1
      }
    },
    [EchoKey.RIGHT_ENT] (evt) {
      this.currentPage++
      if (this.currentPage > this.allPage) {
        this.currentPage = this.allPage
      }
    }
  }
</script>

<style lang = "less">
  .log-book {
    border: 2px solid;
    background-color: white;
    height: 716px;
  }

  .log-book-head {
    text-align: left;
    font-size: 20px;
    #log-title {
      display: inline-block;
      color: white;
      background-color: #224F99;
      margin-top: 10px;
      margin-left: 10px;
    }
  }

  .log-book-body {
    .page-num {
      color: white;
      text-align: right;
      font-size: 25px;
      background-color: #334997;
    }

    .log-book-table-title {
      color: white;
      background-color: #334997;
      font-size: 25px;
    }

    .logData {
      font-size: 25px;
    }

    .echo-disp {
      border: 1px solid;
      height: 250px;
    }

    .log-book-draught {
      color: black;
      font-size: 30px;
      display: inline-block;
      position: relative;
      top: -40px;
      left: 100px;
    }

    .log-book-depth {
      font-size: 100px;
      position: relative;
    }
  }

  .log-book-tail {
    text-align: left;

    .log-book-description {
    }
  }

  .log-localtime {
    position: relative;
    top: -20px;
    left: 800px;
    line-height: 30px;
  }

  .log-table {
    border: 1px solid;
    height: 350px;
  }

  .out-put {
    border: 2px solid #368BB8;
    position: relative;
    top: 0px;
    margin-top: 5px;
    background-color: #B7BABD;
  }


  .depthVal {
    font-size: 90px;
  }

  .local {
    width: 200px;
    border-left: 1px solid grey;
  }

  .aft {
    width: 200px;
    border-left: 1px solid grey;
  }

  .fore {
    width: 200px;
    border-left: 1px solid grey;
  }

  .lat {
    width: 170px;
    border-left: 1px solid grey;
    font-size: 20px;
    text-align: center;
  }

  .lon {
    width: 170px;
    border-left: 1px solid grey;
    font-size: 20px;
    text-align: center;
  }

  .index1 {
    background-color: white;
  }

  .index2 {
    background-color: #B5C7E3;
  }

  .table-title {
    background-color: #334997;
  }

  .title1 {
    width: 200px;
    display: inline-block;
    border-top: 1px solid;
    border-right: 1px solid;
  }

  .title2 {
    width: 200px;
    display: inline-block;
    border-top: 1px solid;
    border-right: 1px solid;
  }

  .title3 {
    width: 200px;
    display: inline-block;
    border-top: 1px solid;
    border-right: 1px solid;
  }

  .title4 {
    width: 342px;
    display: inline-block;
    border-top: 1px solid;
  }
</style>
